<template><!--  创建异步组件
        作用：直观的作用，当这个页面（项目的首页），没有加载出来时，给一个提示的效果
            加载完毕后，显示首页 
         将这个项目通过 异步组件 划分 =》 本质：分包
     -->

         <Suspense>
             <!-- 具有深层异步依赖的组件 -->
             <AyLogin />

             <!-- 在 #fallback 插槽中显示 “正在加载中” -->
             <template #fallback>
                 <Loading></Loading>
             </template>
         </Suspense>

</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import Loading from '../Loading/index.vue'
// 作用： 返回一个异步组件

console.log('ay2222');

//这个方法就是返回 Promise
let AyLogin = defineAsyncComponent(
    () => import('@/views/Login/index.vue')
    // return () => import('@/views/Login/index.vue')   
    // 路由懒加载  =》 本质也是 promise
)


// 组件创建好之后，需要去到我们的 路由表 =》 修改 根据路由匹配的地址

</script>

<style></style>